<template>
    <div style="padding: 20px">
        <!-- 添加班级按钮 -->
        <el-button icon="el-icon-edit" type="success" @click="addData()" style="margin-bottom: 20px">添加班级</el-button>
        <!-- el:table 表格 :data='循环的数组' -->
        <el-table border :data="productList" stripe style="width: 100%">
            <!-- prop='属性名' label='网页展示的标签' -->
            <el-table-column align="center" prop="id" label="序号" width="80"></el-table-column>
            <el-table-column align="center" label="班级">
                <template slot-scope="scope">
                    <router-link
                            @click="change"
                            :to="{path:'/table/clazzlist/clazzdetail', query: {id:scope.row.id}}"
                    >{{scope.row.name}}
                    </router-link>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="count" label="学生人数"></el-table-column>
            <el-table-column align="center" prop="teacherNums" label="教师人数"></el-table-column>
            <!-- <el-table-column prop="" label=""></el-table-column> -->
            <el-table-column align="center" fixed="right" label="操作" width="200">
                <!-- 编辑按钮组 -->
                <template slot-scope="scope">
                    <el-button type="primary" @click="handleClick(scope.row)" size="small">编辑</el-button>
                    <el-button type="danger" @click="handledelete(scope.row)" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--
              分页功能
              @size-change:显示行数发生改变执行的方法
              @current-change:页数改变发生执行的方法
              :page-sizes:可提供用户选择显示行数的选择
              :current-page.sync:高亮显示页面
              layout="total, sizes, prev, pager, next, jumper" :分页功能--统计,上一页,页数,下一页和跳转
              :total:统计拥有多少条数据
        -->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 20, 30, 40]"
                :current-page.sync="currPage"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
        ></el-pagination>
        <!-- 点击编辑弹出的dialog -->
        <el-dialog :visible.sync="dialogFormVisible" :modal-append-to-body="false">
            <el-form
                    ref="dataForm"
                    label-position="left"
                    label-width="70px"
                    style="width: 400px; margin-left:50px;"
            >
                <el-form-item label="ID" v-show="isAdd != true">
                    <el-input v-model="user.id" :disabled="isAdd == false" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="班级名">
                    <el-input v-model="user.name" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="updateData()">提交</el-button>
            </div>
        </el-dialog>
        <router-view/>
    </div>
</template>

<script>
    import axios from "axios";

    export default {
        name: "List",
        data() {
            return {
                productList: [],
                pos: 0, //坐标
                pageSize: 10, //每一页显示的数据条数
                total: 150, //记录总数
                maxPage: 99, //最大页数
                currPage: 1, //当前页
                dialogFormVisible: false, //dialog框是否显示
                isAdd: false, //判断是否为添加方法或者更新方法
                //双向绑定学生信息
                user: {
                    id: "",
                    name: "",
                    password: "",
                    phone: ""
                },
                id: "",
                clientWidth: 0,
            };
        },
        components: {},
        methods: {
            //分页显示行数发生改变
            handleSizeChange(pageSizes) {
                //每一页显示的数据条数
                this.pageSize = pageSizes;
                //从新加载数据
                this.pageHandler(0);
            },
            //分页页数发生改变
            handleCurrentChange(currentPage) {
                this.currPage = currentPage;
                //改变数据
                this.pageHandler((this.currPage - 1) * this.pageSize);
            },
            //删除学生事件
            handledelete(row) {
                //使用 axios 调用后台接口
                let url = "/api/clazz?id=" + row.id;
                axios
                    .delete(url)
                    .then(res => {
                        this.currPage = 1;
                        this.handleCurrentChange(1);
                        this.$message("更新成功!");
                    })
                    .catch(err => {
                        this.$message.error('错了哦，请重新操作')
                        console.log(err);
                    });
            },
            //编辑学生事件
            handleClick(row) {
                //因为是更新用户所以参数为false
                this.isAdd = false;
                //让dialog显示
                this.dialogFormVisible = true;
                //动态获取学生信息
                this.user.id = row.id;
                this.user.name = row.name;
                this.user.password = row.password;
                this.user.phone = row.phone;
            },
            //pagehandler方法 跳转到坐标
            pageHandler(pos) {
                //防止传入坐标错误,进行修改
                if (pos <= 0) {
                    pos = 0;
                }
                if (pos >= this.total) {
                    if (this.total % this.pageSize == 0) {
                        pos = this.total - this.pageSize;
                    } else {
                        pos = this.total - (this.total % this.pageSize);
                    }
                }
                this.pos = pos;
                //使用 axios 调用后台接口
                let url =
                    "/api/clazz?pos=" +
                    this.pos +
                    "&rows=" +
                    this.pageSize;
                axios
                    .get(url)
                    .then(res => {
                        //将数据绑定对应属性中
                        this.productList = res.data.list;
                        this.total = parseInt(res.data.total);
                        //设置最大页数,向下取整
                        this.maxPage = Math.ceil(this.total / this.pageSize);
                    })
                    .catch(err => {
                        console.log("error");
                    });
            },
            //更新和添加公用同一个方法
            updateData() {
                //判断是否添加方法,否则进入更新方法
                if (this.isAdd == false) {
                    if (this.user.id == "" || this.user.name == "") return this.$message.error('错了哦，请重新操作');
                    let url = "/api/clazz"; //?id="+this.user.id+"&name="+this.user.name+"&password="+this.user.password+"&phone="+this.user.phone;
                    axios
                        .put(url, {
                            id: this.user.id,
                            name: this.user.name,
                            password: this.user.password,
                            phone: this.user.phone
                        })
                        .then(res => {
                            this.dialogFormVisible = false;
                            this.currPage = 1;
                            this.handleCurrentChange(1);
                            this.$message("更新成功!");
                        })
                        .catch(err => {
                            this.$message.error('错了哦，请重新操作')
                            console.log(err);
                        });
                }
                if (this.isAdd == true) {
                    if (this.user.name == "") return this.$message.error('错了哦，请重新操作');
                    let url = "/api/clazz"; //?id="+this.user.id+"&name="+this.user.name+"&password="+this.user.password+"&phone="+this.user.phone;
                    axios
                        .post(url, {
                            id: this.user.id,
                            name: this.user.name,
                            password: this.user.password,
                            phone: this.user.phone
                        })
                        .then(res => {
                            this.dialogFormVisible = false;
                            this.currPage = 1;
                            this.handleCurrentChange(1);
                            this.$message("更新成功!");
                        })
                        .catch(err => {
                            this.$message.error('错了哦，请重新操作')
                            console.log(err);
                        });
                }
            },
            //添加学生方法
            addData() {
                this.isAdd = true;
                this.dialogFormVisible = true;
                this.user.id = "";
                this.user.name = "";
                this.user.password = "";
                this.user.phone = "";
            },
            getQueryVariable(letiable) {
                let query = window.location.search.substring(1);
                let lets = query.split("&");
                for (let i = 0; i < lets.length; i++) {
                    let pair = lets[i].split("=");
                    if (pair[0] == letiable) {
                        return pair[1];
                    }
                }
                return false;
            },
            change() {
                this.isFather = false;
            }
        },
        created() {
            //created  表示页面加载完毕，立即执行
            this.pageHandler(0);
            this.clientWidth = document.body.clientWidth;
        },
    };
</script>

<style lang="scss" scoped>
</style>
